<template>
  <div>
    <div class="pageTitleWhole viye_detala">
      <div style="color:#1890FF;float:left;margin-right:15px;cursor:pointer">
        <router-link :to="`/shipCenter/voyageManagement?f=1`">
          <a-icon type="left" />返回
        </router-link>
      </div>
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <div class="voyageDE">
      <div class="voyageDETitle">
        <h3>
          <img src="../../../static/images/voyage-icon.png" alt srcset />
          航次：{{detailData.voyageNumber}}
        </h3>
        <a-select
          v-model="detailData.isCostRecorded"
          @change="feeChange"
          :disabled="!btnControl.editCostRecorded ? true : feeChangeStatus"
          style="width:135px;"
        >
          <a-select-option :value="0">费用未录完</a-select-option>
          <a-select-option :value="1">费用已录完</a-select-option>
        </a-select>
        <div
          v-if="!btnControl.editCostRecorded"
          style="color:red;margin-left:10px;line-height:30px"
        >*您无此权限！</div>
      </div>
      <a-row>
        <a-col :span="21">
          <a-col :span="7" style="margin-left:62px;">
            <div class="HCdetail">船名：{{detailData.shipName}}</div>
            <div class="HCdetail">起航日期：{{detailData.departureDate}}</div>
            <div class="HCdetail">结束日期：{{detailData.arriveDate ? detailData.arriveDate: '--'}}</div>
          </a-col>
          <a-col :span="7">
            <div class="HCdetail">始发港：{{detailData.departurePortName}}</div>
            <div class="HCdetail">航程：{{detailData.mileage}}</div>
            <div class="HCdetail">船长：{{detailData.captainName}}</div>
          </a-col>
          <a-col :span="7">
            <div class="HCdetail">目的港：{{detailData.arrivePortName}}</div>
            <div class="HCdetail">航期：{{detailData.status === 1 ? '--' : detailData.sailingDays}}</div>
            <div class="HCdetail">船APP账号：{{detailData.phone}}</div>
          </a-col>
        </a-col>
        <a-col :span="3">
          <!-- <a-button type="primary" @click="edit">编 辑</a-button> -->
          <h2
            class="HCdetail_zt"
          >{{detailData.status === 1 ? '待执行' : detailData.status === 2 ? '执行中' : '结束'}}</h2>
        </a-col>
      </a-row>
    </div>
    <a-row style="background:#fff;padding:24px 24px 24px 62px;">
      <a-col :span="21">
        <span class="hangc">航线</span>
        <a-steps progress-dot>
          <a-step
            v-for="(item,index) in shipVoyagePortList"
            :key="index"
            :title="item.portName"
            :status="item.status==1 ? 'process': item.status==2 ? 'finish' : 'wait'"
          />
        </a-steps>
        <!-- <a-steps progress-dot>
          <a-step :title="1" status="wait" />
          <a-step :title="1" status="process" />
          <a-step :title="1" status="process" />
          <a-step :title="1" status="finish" />
          <a-step :title="1" status="finish" />
          <a-step :title="1" status="error" />
          <a-step :title="1" status="wait" />
        </a-steps>-->
      </a-col>
    </a-row>
    <a-tabs
      :animated="false"
      default-active-key="1"
      style="min-height:550px;padding-bottom:20px;"
      class="chuanb"
      @change="tabChange"
    >
      <a-tab-pane key="1" tab="费用信息" style="padding:8px 24px 24px 24px;">
        <a-card :bordered="false" class="orderCenterAntCard12">
          <template v-if="btnControl.queryCostInfo">
            <div class="card-title">
              费用信息
              <a-button
                style="float:right;margin-right:28px"
                type="primary"
                @click="showFeeCalc"
              >费用小计</a-button>
            </div>
            <div class="feeTop" style="margin-right:25px;">
              <div class="iconTextMix">
                <img src="@@/images/icon-s.png" alt />
                <span>应收</span>
              </div>
              <a-button type="primary" @click="addFee(1)">+ 增加应收</a-button>
            </div>
            <div class="ddzx_fyxx">
              <a-table
                :columns="feeColumns"
                :data-source="receiveFeeList"
                bordered
                :pagination="false"
                :row-key="(record,index) => index"
                :row-class-name="(record, index) => index % 2 === 0 ? '' : 'redRpw'"
                style="margin: 0 25px;"
              >
                <template slot="customTitle">应收金额</template>
                <template slot="money" slot-scope="record">
                  <span v-if="record.currencyType === 'CNY'">{{record.amount.toFixed(2)}}</span>
                  <span v-else style="color:orange">$ {{record.amount.toFixed(2)}}</span>
                </template>
                <template slot="footer">
                  <div :class="receiveFeeList.length % 2 === 0 ? 'whiteRpw' : 'whiteRpwe'">
                    <div style="text-align:right">
                      应收总金额：¥
                      <span
                        style="font-size:26px;color:orange"
                      >{{totalReceiveFee.toFixed(2)}}</span>
                    </div>
                  </div>
                </template>
                <span slot="do" slot-scope="record" :style="'display: flex; align-items: center;'">
                  <a style="margin-right:10px" @click="history(record)">历史记录</a>
                  <a @click="editFee(record, 1)">编辑</a>
                </span>
              </a-table>
            </div>
            <div class="feeTop" style="margin-top:30px; margin-right:25px;">
              <div class="iconTextMix">
                <img src="@@/images/icon-f.png" alt />
                <span>应付</span>
              </div>
              <a-button type="primary" @click="addFee(2)">+ 增加应付</a-button>
            </div>
            <div class="ddzx_fyxx">
              <a-table
                :columns="feeColumns"
                :data-source="payFeeList"
                bordered
                :pagination="false"
                :row-key="(record,index) => index"
                :row-class-name="(record, index) => index % 2 === 0 ? '' : 'redRpw'"
                style="margin: 0 25px;"
              >
                <template slot="customTitle">应付金额</template>
                <template slot="money" slot-scope="record">
                  <span v-if="record.currencyType === 'CNY'">{{record.amount.toFixed(2)}}</span>
                  <span v-else style="color:orange">$ {{record.amount.toFixed(2)}}</span>
                </template>
                <template slot="footer">
                  <div :class="payFeeList.length % 2 === 0 ? 'whiteRpw' : 'whiteRpwe'">
                    <div style="text-align:right">
                      应付总金额：¥
                      <span style="font-size:26px;color:orange">{{totalPayFee.toFixed(2)}}</span>
                    </div>
                  </div>
                </template>
                <span slot="do" slot-scope="record" :style="'display: flex; align-items: center;'">
                  <a style="margin-right:10px" @click="history(record)">历史记录</a>
                  <a @click="editFee(record, 2)">编辑</a>
                </span>
              </a-table>
            </div>
            <div class="feeTop" style="margin-top:30px">
              <div class="iconTextMix">
                <img src="@@/images/icon-f.png" alt />
                <span>毛利</span>
              </div>
            </div>
            <a-list class="calcList calcList_2" :grid="{ column: 4 }" style="margin-left：25px;">
              <a-list-item style="width:23.4%;">
                <a-card title="总应收">
                  ¥
                  <span class="moneyCss">{{totalReceiveFee.toFixed(2)}}</span>
                </a-card>
              </a-list-item>
              <a-list-item class="sale_yf" style="width:20.4%;">
                <a-card title="总应付">
                  ¥
                  <span class="moneyCss">{{totalPayFee.toFixed(2)}}</span>
                </a-card>
              </a-list-item>
              <a-list-item class="sale_ml" style="width:27%;">
                <a-card title="毛利">
                  ¥
                  <span class="moneyCss">{{(totalReceiveFee - totalPayFee).toFixed(2)}}</span>
                </a-card>
              </a-list-item>
            </a-list>
          </template>
          <template v-else>
            <div class="noControlIcon">
              <img :src="noControlIcon" alt />
            </div>
          </template>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="船舶动态" style="padding:8px 24px 24px 24px;">
        <a-card :bordered="false">
          <template v-if="btnControl.queryShipDynamics">
            <div class="card-title">船舶动态</div>
            <a-row>
              <a-col :span="9">
                <div class="hangci_rzhi" style="margin-right:24px">
                  <a-card title="航次日志">
                    <div class="dp_ddgz" style="height:474px; overflow-y:scroll; margin:24px 0;">
                      <dl>
                        <template v-for="(item,index) in shipVoyageLogList">
                          <dt :key="index">
                            {{item.createTime.split(" ")[0]}}
                            <br />
                            {{item.createTime.split(" ")[1]}}
                          </dt>
                          <dd
                            :key="'info-'+index"
                            :class="shipVoyageLogList.length ===1 ? 'dp_ddgz_b' : index === 0 ? 'dp_ddgz_t': index+1 === shipVoyageLogList.length ? 'dp_ddgz_b' : ''"
                          >
                            <h1>{{item.title}}</h1>
                            <a-tooltip placement="rightTop" v-if="item.content">
                              <template slot="title">
                                <span>{{item.content}}</span>
                              </template>
                              <p>备注：{{item.content}}</p>
                            </a-tooltip>
                          </dd>
                        </template>
                      </dl>
                    </div>
                  </a-card>
                </div>
              </a-col>
              <a-col :span="15">
                <a-card title="日志统计" style="height:580px">
                  <a-row :gutter="[20]">
                    <a-col :span="10">
                      <div class="JournalRZ">
                        <a-card
                          title="今日上报次数"
                          :head-style="{fontSize:'14px', borderBottom:'none'}"
                          :body-style="{fontSize:'26px',color:'#000',padding:'10px 24px'}"
                        >
                          <!-- <a slot="extra" @click="remindReport">提醒上报</a> -->
                          <a-button
                            slot="extra"
                            type="link"
                            @click="remindReport"
                            :disabled="detailData.status === 2 ? false : true"
                          >提醒上报</a-button>
                          {{todayLogNum}}
                        </a-card>
                      </div>
                    </a-col>
                    <a-col :span="7">
                      <div class="JournalRZ JournalRZ1">
                        <a-card
                          title="累计上报次数"
                          :head-style="{fontSize:'14px', borderBottom:'none'}"
                          :body-style="{fontSize:'26px',color:'#000',padding:'10px 24px'}"
                        >{{totalLogNum}}</a-card>
                      </div>
                    </a-col>
                    <a-col :span="7">
                      <div class="JournalRZ JournalRZ2">
                        <a-card
                          title="航期（天）"
                          :head-style="{fontSize:'14px', borderBottom:'none'}"
                          :body-style="{fontSize:'26px',color:'#000',padding:'10px 24px'}"
                        >{{detailData.status != 1 ? shipVoyageLogStatisticsList.length : 0}}</a-card>
                      </div>
                    </a-col>
                  </a-row>
                  <div style="margin-top:20px;color:#000;font-size:18px">日志上报次数统计</div>
                  <div
                    id="echartss"
                    :style="shipVoyageLogStatisticsList.length > 15 ? {width:'100%',height:'300px',overflowX:'scroll'} : {width:'100%',height:'300px'}"
                  ></div>
                </a-card>
              </a-col>
            </a-row>
          </template>
          <template v-else>
            <div class="noControlIcon">
              <img :src="noControlIcon" alt />
            </div>
          </template>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="3" tab="装箱情况" style="padding:8px 24px 24px 24px;">
        <a-card :bordered="false">
          <template v-if="btnControl.queryContainerSituation">
            <div class="card-title">装箱情况</div>
            <a-form :model="form" ref="form" layout="inline">
              <a-form-item label="箱号/封号/运单号/司编号" prop="codeLike">
                <a-input v-model="form.codeLike" />
              </a-form-item>
              <a-form-item label="持箱人">
                <a-select v-model="form.holderId" style="width:200px;">
                  <a-select-option value>全部</a-select-option>
                  <a-select-option
                    v-for="(item,index) in holderList"
                    :key="index"
                    :value="item.id"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="箱态">
                <a-select v-model="form.emptyOrHeavy" style="width:120px;">
                  <a-select-option value>全部</a-select-option>
                  <a-select-option :value="1">空箱</a-select-option>
                  <a-select-option :value="2">重箱</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="箱型">
                <a-select v-model="form.containerTypeId" style="width:120px;">
                  <a-select-option value>全部</a-select-option>
                  <a-select-option
                    v-for="(item,index) in containerList"
                    :key="index"
                    :value="item.id"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="始发港">
                <a-select v-model="form.startPortId" style="width:120px;">
                  <a-select-option value>全部</a-select-option>
                  <a-select-option
                    v-for="(item,index) in portList"
                    :key="index"
                    :value="item.id"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="目的港">
                <a-select v-model="form.endPortId" style="width:120px;">
                  <a-select-option value>全部</a-select-option>
                  <a-select-option
                    v-for="(item,index) in portList"
                    :key="index"
                    :value="item.id"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="check">查 询</a-button>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="excelExport">导出Excel</a-button>
              </a-form-item>
            </a-form>
            <a-table
              :columns="columns"
              :loading="loading"
              :data-source="data"
              style="margin-top:25px;"
              :scroll="{x:1600,y:450}"
              :pagination="pagination"
              :row-key="(record,index) => index"
            >
              <template slot="company" slot-scope="text, record">
                <a v-if="record.shipOrderCode" @click="orderDetail(record)">{{record.shipOrderCode}}</a>
                <span v-else>--</span>
              </template>
              <template slot="status" slot-scope="text, record">
                <span v-if="record.containerStatus === 'A'">A</span>
                <span v-else-if="record.containerStatus === 'COMMON'">普通</span>
                <span v-else-if="record.containerStatus === 'BROKEN'">坏箱</span>
                <span v-else-if="record.containerStatus === 'DIRTY'">污箱</span>
              </template>
            </a-table>
          </template>
          <template v-else>
            <div class="noControlIcon">
              <img :src="noControlIcon" alt />
            </div>
          </template>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      v-model="addVisible"
      :title="isFeeModalEdit ? '编辑费用' : feeType === 1 ? '新增应收' : '新增应付'"
      :body-style="{padding:'40px 40px 20px 20px'}"
      :width="600"
      centered
      :confirm-loading="confirmLoading"
      @cancel="cancelAdd"
      @ok="completeAdd"
      destroyOnClose
    >
      <a-form-model
        ref="addForm"
        :rules="rules"
        :model="addForm"
        :label-col="{span:7}"
        :wrapper-col="{span:17}"
      >
        <!-- 选择费用类型 -->
        <a-form-model-item label="选择费用类型" prop="feetypeId">
          <a-select v-model="addForm.feetypeId" @change="feeTypeChange">
            <a-select-option value>请选择</a-select-option>
            <a-select-option v-for="(v,k) in feeList" :key="k" :value="v.id">{{v.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 选择结算对象 -->
        <a-form-model-item label="选择结算对象" prop="custId">
          <!-- <a-auto-complete @select="onSelect" @search="onSearch">
            <template slot="dataSource">
              <a-select-option
                v-for="(record,index) in custList"
                :key="index"
                :value="record.name"
              >{{ record.name }}</a-select-option>
            </template>
          </a-auto-complete>-->
          <a-select
            style="width:100%"
            show-search
            :show-arrow="false"
            :filter-option="false"
            :default-active-first-option="false"
            not-found-content="请选择"
            v-model="addForm.custId"
            @search="onSearch"
            @blur="restCustList"
          >
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(record,index) in custList"
              :key="index"
              :value="record.id"
            >{{ record.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 应收金额 -->
        <a-row>
          <a-col :span="18">
            <a-form-model-item
              :label="feeType === 1 ? '应收金额' : '应付金额'"
              prop="amount"
              :wrapperCol="{span:15}"
              :labelCol="{span:9}"
            >
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="addForm.amount"
                style="width:100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="currencyType" :wrapperCol="{span:24}">
              <a-select v-model="addForm.currencyType" style="width:100%">
                <!-- <a-select-option key>请选择</a-select-option> -->
                <a-select-option v-for="v in moneyTypeArray" :key="v">{{v}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 备注 -->
        <a-form-model-item label="备注" prop="remark">
          <a-input
            v-model="addForm.remark"
            type="textarea"
            :auto-size="{ minRows: 3, maxRows: 3 }"
            :max-length="200"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 费用历史 -->
    <a-modal
      title="历史记录"
      width="1000px"
      centered
      :visible="historyVisible"
      :footer="null"
      @cancel="historyCancel"
    >
      <a-table
        :columns="columnsLocal"
        :data-source="historyData"
        :row-key="record => record.id"
        :pagination="false"
      ></a-table>
    </a-modal>
    <!-- 费用小计 -->
    <a-modal
      title="费用小计"
      width="600px"
      centered
      :visible="feeCalcVisible"
      :footer="null"
      @cancel="feeCalcCancel"
    >
      <a-table
        :columns="feeCalcColumns"
        :data-source="feeCalcData"
        :row-key="record => record.id"
        :pagination="false"
      ></a-table>
    </a-modal>
  </div>
</template>
<script>
import noControlIcon from '@@/images/noControl.png'
import {
  getShipVoyageById,
  getShipVoyageLogById,
  remindReportLog,
  queryVoyageContainerList,
  addBillCost,
  updateCostRecordStatus,
  editBillCost
} from '@/api/shipCenter'
import {
  queryCustNameList,
  queryFeeTypeList,
  queryHolderNameList,
  queryContainerTypeList,
  queryPortNameList
} from '@/api'
import {
  queryShipOrderCostList,
  queryCostSubTotal,
  queryHistoryCostList
} from '@/api/orderCenter'
import echarts from 'echarts'
import { commonExport } from '@/api/request'
import _ from 'lodash/debounce'
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '公司编号',
    dataIndex: 'shipOrderCode',
    scopedSlots: {
      customRender: 'company'
    },
    width: 150
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '封号',
    dataIndex: 'containerSealNo',
    customRender: (text, record, index) => {
      return record.containerSealNo || '--'
    }
  },
  {
    title: '运单号',
    width: 150,
    dataIndex: 'seagoingShipOrderCode',
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode || '--'
    }
  },
  {
    title: '持箱人',
    dataIndex: 'holderName',
    width: 260
  },
  {
    title: '始发港',
    dataIndex: 'startPortName'
  },
  {
    title: '目的港',
    dataIndex: 'endPortName'
  },
  {
    title: '箱型',
    dataIndex: 'containerType'
  },
  {
    title: '箱态',
    _needName: true,
    dataIndex: 'emptyOrHeavy',
    customRender: (text, record, index) => {
      return record.emptyOrHeavy === 1 ? '空' : '重'
    }
  },
  {
    title: '箱况',
    _needName: true,
    dataIndex: 'containerStatus',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '货名',
    dataIndex: 'goodsName',
    customRender: (text, record, index) => {
      return record.goodsName || '--'
    }
  },
  {
    title: '货重（吨）',
    dataIndex: 'goodsWeight',
    customRender: (text, record, index) => {
      return record.goodsWeight || '--'
    }
  },
  {
    title: '装船日期',
    width: 150,
    dataIndex: 'loadingTime',
    customRender: (text, record, index) => {
      return record.loadingTime || '--'
    }
  }
]
const feeColumns = [
  {
    title: '费用类型',
    width: 200,
    dataIndex: 'feeName'
  },
  {
    // title: '应收金额（元）',
    slots: { title: 'customTitle' },
    width: 200,
    scopedSlots: {
      customRender: 'money'
    }
  },
  {
    title: '结算对象',
    dataIndex: 'custName'
  },
  {
    title: '备注',
    customRender: record => {
      return `${record.createTime} ${record.operator ? record.operator : ''}\n${
        record.remark ? '备注：' + record.remark : ''
      }`
    },
    ellipsis: true,
    width: 200
  },
  {
    title: '操作',
    width: 120,
    scopedSlots: {
      customRender: 'do'
    }
  }
]
const formMessage = `必填项不能为空`
const defaultForm = () => ({
  codeLike: '',
  holderId: '',
  emptyOrHeavy: '',
  containerTypeId: '',
  startPortId: '',
  endPortId: '',
  statusList: [2, 3],
  voyageId: ''
})
export default {
  name: 'voyageManagementDetail',
  props: ['id'],
  data () {
    this.onSearch = _(this.onSearch, 800)
    const columnsLocal = [
      {
        title: '操作时间',
        dataIndex: 'createTime',
        customRender: (text, record, index) => {
          if (index === 0) {
            return (
              <div>
                {text}
                <span class="redMsg">最新记录</span>
              </div>
            )
          }
          return text
        }
      },
      {
        title: '操作人',
        dataIndex: 'operator'
      },
      {
        title: '费用类型',
        dataIndex: 'feeName'
      },
      {
        title: '金额',
        dataIndex: 'amount',
        customRender: (text, record, index) => {
          if (record.currencyType === 'CNY') {
            return <div>{text}</div>
          } else {
            return <div style="color:orange">${text}</div>
          }
        }
      },
      {
        title: '结算对象',
        dataIndex: 'custName',
        width: 220,
        ellipsis: true
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: 260,
        ellipsis: true
      }
    ]
    const feeCalcColumns = [
      {
        title: '结算对象',
        dataIndex: 'custName'
      },
      {
        title: '应收费用(元)',
        dataIndex: 'receivableAmount',
        customRender: (text, record, index) => {
          if (record.currencyType === 'CNY') {
            return <div>{text}</div>
          } else {
            return <div style="color:orange">${text}</div>
          }
        }
      },
      {
        title: '应付费用(元)',
        dataIndex: 'payableAmount',
        customRender: (text, record, index) => {
          if (record.currencyType === 'CNY') {
            return <div>{text}</div>
          } else {
            return <div style="color:orange">${text}</div>
          }
        }
      }
    ]
    return {
      noControlIcon,
      backStatus: false,
      confirmLoading: false,
      basePath: '/shipCenter',
      routes: [
        {
          path: '/voyageManagement',
          breadcrumbName: '航次管理'
        },
        {
          path: '',
          breadcrumbName: '航次详情'
        }
      ],
      detailData: {},
      shipVoyagePortList: [],
      shipVoyageLogList: [],
      shipVoyageLogStatisticsList: [],
      totalLogNum: 0,
      todayLogNum: 0,
      form: {
        ...defaultForm()
      },
      loading: true,
      pageNum: 1,
      pageSize: 10,
      holderList: [],
      containerList: [],
      portList: [],
      columns,
      data: [],
      pagination: {},
      feeColumns,
      payFeeList: [],
      totalPayFee: 0,
      receiveFeeList: [],
      totalReceiveFee: 0,
      addVisible: false,
      feeType: undefined, // 1应收、2应付
      feeList: [],
      custList: [],
      addForm: {
        custId: '',
        feetypeId: '',
        feeType: '',
        amount: '',
        currencyType: 'CNY',
        remark: ''
      },
      rules: {
        feetypeId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        custId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        amount: [{ required: true, message: formMessage, trigger: 'blur' }],
        currencyType: [
          { required: true, message: formMessage, trigger: 'blur' }
        ]
      },
      moneyTypeArray: [],
      btnControl: {},
      feeChangeStatus: false,
      isFeeModalEdit: false,
      editId: '',
      historyVisible: false,
      historyData: [],
      columnsLocal,
      feeCalcVisible: false,
      feeCalcColumns,
      feeCalcData: [],
      feeCalcReceive: 0,
      feeCalcPay: 0
    }
  },
  methods: {
    keepAliveBack () {
      this.backStatus = true
      this.$router.back(-1)
    },
    restCustList () {
      let param = {
        status: 1,
        belongCompany: 'JIA_CHUANG',
        custTypeLike: 'SUPPLIER'
      }
      if (this.feeType === 1) {
        param.isReceivable = 1
      } else {
        param.isPayable = 1
      }
      this.custListRequest(param)
    },
    queryCostSubTotalRequest (e) {
      queryCostSubTotal(e).then(res => {
        // console.log(res.data)
        let feeCalcReceive = 0
        let feeCalcPay = 0
        let list = res.data
        if (list.length > 0) {
          list.forEach(v => {
            feeCalcReceive += v.cnyReceivableAmount
            feeCalcPay += v.cnyPayableAmount
          })
        }
        this.feeCalcReceive = feeCalcReceive
        this.feeCalcPay = feeCalcPay
        let lastRow = {
          custName: '总计',
          currencyType: 'CNY',
          receivableAmount: feeCalcReceive,
          payableAmount: feeCalcPay
        }
        list.push(lastRow)
        this.feeCalcData = list
      })
    },
    showFeeCalc () {
      this.feeCalcVisible = true
      this.queryCostSubTotalRequest({
        id: this.id,
        businessType: 'JIA_CHUANG'
      })
    },
    feeCalcCancel () {
      this.feeCalcVisible = false
    },
    queryHistoryCostListRequest (e) {
      queryHistoryCostList(e).then(res => {
        // console.log(res.data)
        this.historyData = res.data
      })
    },
    history (e) {
      // console.log(e)
      this.historyVisible = true
      this.queryHistoryCostListRequest({
        id: e.id
      })
    },
    historyCancel () {
      this.historyVisible = false
    },
    editFee (e, type) {
      // console.log(e)
      // // console.log(type)
      let param = {
        status: 1,
        belongCompany: 'JIA_CHUANG',
        custTypeLike: 'SUPPLIER'
      }
      if (type === 1) {
        param.isReceivable = 1
        if (!this.btnControl.editReceivable) {
          this.$message.error('您无此权限！')
          return false
        }
      } else {
        param.isPayable = 1
        if (!this.btnControl.editPay) {
          this.$message.error('您无此权限！')
          return false
        }
      }
      this.custListRequest(param)
      this.feeTypeRequest({
        status: 1,
        belongCompany: 'JIA_CHUANG',
        feeType: type
      }, true, e.feeName)
      this.isFeeModalEdit = true
      this.feeType = type
      this.addVisible = true
      this.editId = e.id
      this.addForm = {
        custId: e.custId,
        feetypeId: e.feeTypeId,
        feeType: e.feeType,
        amount: e.amount,
        currencyType: e.currencyType,
        remark: e.remark
      }
    },
    editBillCostRequest (e) {
      editBillCost(e)
        .then(res => {
          this.$message.success('修改成功！')
          this.payFeeList = []
          this.receiveFeeList = []
          this.shipCostRequest({
            id: this.id,
            businessType: 'JIA_CHUANG'
          })
          setTimeout(() => {
            this.confirmLoading = false
            this.cancelAdd()
          }, 500)
        })
        .catch(rs => {
          this.confirmLoading = false
        })
    },
    updateCostRecordStatusRequest (e) {
      updateCostRecordStatus(e).then(res => {
        // // console.log(res)
        this.$message.success('费用状态修改成功！')
        this.getShipVoyageDetail({ id: this.id })
        setTimeout(() => {
          this.feeChangeStatus = false
        }, 100)
      })
    },
    feeChange () {
      this.feeChangeStatus = true
      // // console.log('订单id----' + this.id)
      // // console.log('状态' + this.detailData.isCostRecorded)
      this.updateCostRecordStatusRequest({
        id: this.id,
        isCostRecorded: this.detailData.isCostRecorded
      })
    },
    feeTypeChange (value) {
      this.addForm.currencyType = ''
      let targetKey
      this.feeList.forEach((v, k) => {
        if (v.id === value) {
          targetKey = k
        }
      })
      this.moneyTypeArray = this.feeList[targetKey].currencyType.split(',')
      this.addForm.currencyType = this.moneyTypeArray[0]
    },
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => {})
    },
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then(res => {
          this.containerList = res.data
        })
        .catch(rs => {})
    },
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => {})
    },
    voyageContainerListRequest (e) {
      this.loading = true
      queryVoyageContainerList(e)
        .then(res => {
          // // console.log(res)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.voyageContainerListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.voyageContainerListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    shipCostRequest (e) {
      queryShipOrderCostList(e)
        .then(res => {
          // // console.log(res.data)
          let list = res.data
          let calcR = 0
          let calcP = 0
          list.forEach(i => {
            if (i.feeType === 1) {
              this.receiveFeeList.push(i)
              calcR += i.cnyAmount
            } else {
              this.payFeeList.push(i)
              calcP += i.cnyAmount
            }
          })
          this.totalReceiveFee = calcR
          this.totalPayFee = calcP
        })
        .catch(rs => {})
    },
    feeTypeRequest (e, isNeed, feeName) {
      queryFeeTypeList(e)
        .then(res => {
          // console.log(res.data)
          this.feeList = res.data
          if (isNeed) {
            let moneyTypeArray = []
            res.data.forEach(v => {
              // if (v.name === '应收客户' || v.name === '应付客户') {
              //   moneyTypeArray = v.currencyType.split(',')
              // }
              if (v.name === feeName) {
                moneyTypeArray = v.currencyType.split(',')
              }
            })
            this.moneyTypeArray = moneyTypeArray
          }
        })
        .catch(rs => {})
    },
    custListRequest (e) {
      queryCustNameList(e)
        .then(res => {
          this.custList = res.data
        })
        .catch(rs => {})
    },
    addFeeRequest (e) {
      addBillCost(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('添加成功！')
            this.payFeeList = []
            this.receiveFeeList = []
            this.shipCostRequest({
              id: this.id,
              businessType: 'JIA_CHUANG'
            })
            setTimeout(() => {
              this.confirmLoading = false
              this.cancelAdd()
            }, 500)
          }
        })
        .catch(rs => {
          this.confirmLoading = false
        })
    },
    getShipVoyageDetail (param) {
      let _this = this
      getShipVoyageById(param)
        .then(res => {
          // status 1 灰 2蓝
          // // console.log(res.data.shipVoyagePortList)
          _this.detailData = res.data
          _this.shipVoyagePortList = res.data.shipVoyagePortList
        })
        .catch(rs => {})
    },
    voyageStatus (param) {
      let _this = this
      // 船舶状态-柱状图
      let myChart = echarts.init(document.getElementById('echartss'))
      getShipVoyageLogById(param)
        .then(res => {
          // // console.log(res.data)
          let totalLogNum = 0
          let LogList = res.data.shipVoyageLogList
          let logStatisticsList = res.data.shipVoyageLogStatisticsList
          let xAxisArray = []
          let seriesArray = []
          for (let i = 0; i < logStatisticsList.length; i++) {
            totalLogNum += logStatisticsList[i].logNum
            xAxisArray.push(logStatisticsList[i].logDate)
            seriesArray.push(logStatisticsList[i].logNum)
          }
          _this.shipVoyageLogList = LogList
          _this.shipVoyageLogStatisticsList = logStatisticsList
          _this.totalLogNum = totalLogNum
          _this.todayLogNum =
            logStatisticsList[logStatisticsList.length - 1].logNum
          myChart.setOption({
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: xAxisArray,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '上报次数',
                type: 'bar',
                barWidth: '20%',
                data: seriesArray
              }
            ]
          })
        })
        .catch(rs => {})
    },
    remindReport () {
      if (!this.btnControl.remind) {
        this.$message.error('您无此权限！')
        return false
      }
      let _this = this
      remindReportLog({ id: _this.id })
        .then(res => {
          if (res.code === 0) {
            _this.$message.success('提醒成功！')
          }
        })
        .catch(rsp => {})
    },
    tabChange (key) {
      if (key === '1') {
        this.receiveFeeList = []
        this.payFeeList = []
        this.shipCostRequest({
          id: this.id,
          businessType: 'JIA_CHUANG'
        })
      } else if (key === '2') {
        this.$nextTick(() => {
          this.getShipVoyageDetail({ id: this.id })
          this.voyageStatus({ id: this.id })
        })
      } else if (key === '3') {
        Object.assign(this.form, defaultForm())
        this.pageNum = 1
        this.pageSize = 10
        this.holderListRequest({})
        this.containerListRequest({})
        this.portListRequest({
          status: 1
        })
        this.form.voyageId = this.id
        this.voyageContainerListRequest({
          ...this.form,
          pageNum: 1,
          pageSize: 10
        })
      }
    },
    orderDetail (e) {
      window.open(`/orderCenter/order/detail/${e.orderShipId}`, `_blank`)
    },
    check () {
      this.voyageContainerListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    excelExport () {
      commonExport('/order/exportVoyageContainerList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    addFee (e) {
      // // console.log(e)
      if (e === 1) {
        // 应收
        if (!this.btnControl.addReceivable) {
          this.$message.error('您无此权限！')
          return false
        }
      } else if (e === 2) {
        // 应付
        if (!this.btnControl.addPay) {
          this.$message.error('您无此权限！')
          return false
        }
      }
      this.isFeeModalEdit = false
      this.feeType = e
      this.addForm.feeType = e
      this.addForm.custId = ''
      this.addForm.feetypeId = ''
      this.addForm.amount = ''
      this.addForm.currencyType = 'CNY'
      this.addForm.remark = ''
      this.addVisible = true
      let param = {
        status: 1,
        nameLike: '',
        belongCompany: 'JIA_CHUANG',
        custTypeLike: 'SUPPLIER'
      }
      if (this.feeType === 1) {
        param.isReceivable = 1
      } else {
        param.isPayable = 1
      }
      this.custListRequest(param)
      this.feeTypeRequest({
        status: 1,
        belongCompany: 'JIA_CHUANG',
        feeType: e
      })
    },
    onSearch (searchText) {
      let param = {
        status: 1,
        nameLike: searchText,
        belongCompany: 'JIA_CHUANG',
        custTypeLike: 'SUPPLIER'
      }
      if (this.feeType === 1) {
        param.isReceivable = 1
      } else {
        param.isPayable = 1
      }
      this.custListRequest(param)
    },
    onSelect (val, option) {
      this.addForm.custId = this.custList[option.key].id
    },
    completeAdd () {
      let _t = this
      _t.$refs.addForm.validate(valid => {
        if (valid) {
          _t.confirmLoading = true
          if (_t.isFeeModalEdit) {
            this.editBillCostRequest({
              ..._t.addForm,
              businessId: _t.id,
              id: _t.editId
            })
          } else {
            _t.addFeeRequest({
              ..._t.addForm,
              businessId: _t.id
            })
          }
        }
      })
    },
    cancelAdd () {
      this.custList = []
      this.addVisible = false
      this.$refs.addForm.resetFields()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.getShipVoyageDetail({ id: this.id })
    // tab1
    this.shipCostRequest({
      id: this.id,
      businessType: 'JIA_CHUANG'
    })
    this.form.voyageId = this.id
    this.holderListRequest({})
    this.containerListRequest({})
    this.portListRequest({
      status: 1
    })
    this.voyageContainerListRequest({
      ...this.form,
      pageNum: 1,
      pageSize: 10
    })
  },
  beforeRouteLeave (to, from, next) {
    if (this.backStatus) {
      if (to.name === 'voyageManagement') {
        if (!from.meta.keepAlive) {
          to.meta.keepAlive = true
        }
      } else {
        to.meta.keepAlive = false
      }
    } else {
      to.meta.keepAlive = false
    }
    next()
  }
}
</script>

<style lang="less" scoped>
.card-title {
  position: relative;
  padding-left: 16px;
  font-size: 18px;
  line-height: 1;
  color: #000;
  margin-bottom: 20px;
  &:before {
    content: '';
    width: 5px;
    height: 18px;
    background: #1890ff;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: -1px;
  }
}
.feeTop {
  display: flex;
  align-items: center;
  .iconTextMix {
    flex: 1;
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 20px 0;
    padding-left: 24px;
    img {
      width: 25px;
      height: 25px;
    }
    span {
      font-size: 14px;
      margin-left: 10px;
      line-height: 25px;
      font-weight: bold;
    }
  }
}
.ant-card {
  .calcList {
    text-align: center;
    margin-left: 24px;
    span.moneyCss {
      color: orange;
      font-size: 24px;
      margin-left: 5px;
    }
  }
}
.calcList .ant-card {
  margin: 0;
}
/deep/ td {
  position: relative;
  .redMsg {
    position: absolute;
    display: inline-block;
    background: red;
    top: 0;
    width: 60px;
    left: 0;
    font-size: 12px;
    height: 16px;
    text-align: center;
    color: white;
  }
}
</style>
<style>
.calcList_2 .sale_yf .ant-card-bordered {
  border-left: none;
  border-right: none;
}
.calcList_2 .ant-card-head-title {
  padding: 5px 0;
  margin-top: 3px;
}
.calcList_2 .ant-card-head {
  padding: 0;
  background: #f0f0f0;
  min-height: 42px;
}
.calcList_2 .ant-card-head {
  border-top: 4px solid #cf1322;
}
.calcList_2 .sale_yf .ant-card-head {
  border-top: 4px solid #faad14;
}
.calcList_2 .sale_ml .ant-card-head {
  border-top: 4px solid #7cb305;
}
.calcList_2 .ant-card-body {
  padding: 16px 0;
}
.voyageDE {
  background: #fff;
}
.voyageDETitle {
  display: flex;
  padding: 0 24px;
}
.voyageDETitle h3 {
  flex: 1;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  height: 28px;
  margin-bottom: 20px;
}
.voyageDETitle h3 img {
  float: left;
  width: 28px;
  margin-right: 10px;
}
.HCdetail {
  padding-bottom: 10px;
}
.HCdetail_zt {
  float: right;
  padding-right: 24px;
}
.ant-steps-item-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 80%;
  margin: 0 auto;
}
.hangc {
  position: absolute;
  top: -8px;
}
.chuanb .ant-tabs-nav-scroll {
  background: #fff;
  padding: 0 24px;
}
.ant-tabs-nav .ant-tabs-tab {
  font-size: 16px;
}
.viye_detala .ant-card {
  margin: 8px 24px;
}
#echartss::-webkit-scrollbar-track,
.dp_ddgz::-webkit-scrollbar-track {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  background-color: #f2f2f2;
} /*外层轨道*/
#echartss::-webkit-scrollbar,
.dp_ddgz::-webkit-scrollbar {
  width: 8px; /*设置滚动条样式*/
  height: 8px;
  background-color: #fff;
} /*滚动条整体部分，可以设置宽度啥的*/
#echartss::-webkit-scrollbar-thumb,
.dp_ddgz::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #c1c1c1;
} /*滚动的滑块 */
.hangci_rzhi .ant-card-bordered .ant-card-body {
  padding: 0px 0 0px 24px;
}
.JournalRZ {
  background: #f9fcff;
  border: 1px #dbe3ff solid;
}
.JournalRZ .ant-card {
  margin: 0;
}
.JournalRZ .ant-card-bordered {
  background: url(../../../static/images/Journal1.png) no-repeat 95% 80%;
  border: none;
}
.JournalRZ1 .ant-card-bordered {
  background: url(../../../static/images/Journal2.png) no-repeat 90% 80%;
  border: none;
}
.JournalRZ2 .ant-card-bordered {
  background: url(../../../static/images/Journal3.png) no-repeat 90% 80%;
  border: none;
}
.ant-card-extra {
  padding: 0;
}
.ddzx_orderzt {
  text-align: right;
  margin-right: 24px;
}
.ddzx_orderzt .zte {
  margin-right: 3px;
}
.ddzx_orderzt .zted {
  color: #1890ff;
  float: right;
  font-size: 22px;
  margin-top: 4.5px;
  margin-left: 3px;
}
.ddzxdetail_de {
  padding-top: 8px;
}
.ddzxdetail_de .ant-descriptions-item-colon {
  float: left;
  width: 40%;
  text-align: right;
}
.ddzxdetail_de1 .ant-descriptions-item-colon {
  float: left;
  width: 13%;
  text-align: right;
}
.ddzx_xqxx .ant-form-item {
  margin-bottom: 8px;
  padding-right: 30px;
}
.ddzx_fyxx table tr th {
  text-align: center;
  padding: 12px;
  background: #f1f1f1;
}
.ddzx_fyxx table tr td {
  text-align: center;
  padding: 8px;
  height: 46px;
}
.ddzx_fyxx .ant-table-footer {
  padding: 0;
}
.redRpw {
  background: #fafafa;
}
.whiteRpw {
  padding: 12px 16px;
  background: #fff;
}
.whiteRpwe {
  padding: 12px 16px;
  background: #fafafa;
}
.noControlIcon {
  width: 116px;
  height: 138px;
  margin: 20px auto;
  overflow: hidden;
}
.noControlIcon img {
  float: left;
  width: 100%;
}
</style>
